<template>
  <div>
    <div>
      <van-nav-bar>
        <template #left>
          <h1 @click="$router.back()">
            <van-icon name="arrow-left" />
          </h1>
        </template>
        <template #title>
          <div class="qb">
            <p>提现</p>
          </div>
        </template>
        <template #right>
          <div class="div_1" @click="btn">提现记录</div>
        </template>
      </van-nav-bar>
    </div>
    <div class="mian">
      <div class="content">
        <div class="cont">
          <div>
            账户余额
            <span class="cont_s">￥{{ $store.state.Arr.reduce((a, b) => +a + +b) }}</span>
          </div>
        </div>
        <div class="con">
          <div class="con_div">
            <span>单笔金额不少于100，单日提现金额不超过2000，三个工作日以内到账</span>
            <div class="con_d_d">
              <span>提现金额:</span>
              <input type="text" placeholder="请输入提现金额" v-model="txje" />
            </div>
          </div>
        </div>
      </div>
      <div class="mian_b">
        <div class="mian_b_cont">
          <div class="user">
            <span>姓名：</span>
            <input type="text" placeholder="请输入支付宝本人真实姓名" v-model="name" />
          </div>
          <div class="iteh">
            <span>账号:</span>
            <input type="text" placeholder="请输入本人支付宝账号" v-model="nub" />
          </div>
        </div>
      </div>
      <div class="foot">
        <div
          class="foot_text"
        >提示！快上车代驾仅支持支付宝提现，提现金额会在4个工作日左右退回到你的提现账户，请注意查收。工作日不包括周末和法定节假日。（如中秋，端午，国庆等）</div>
        <div class="btn" @click="querybtn()">确认提款</div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      txje: "",
      name: "",
      nub: "",
      getTime: ""
    };
  },
  methods: {
    // 基础 必须满足
    // 当账户余额提现不小于一百可以提现小于一百则不可以提现
    // 控制提现金额输入的不能是非数字
    // 控制名字必须输入不能为空
    // 控制输入的账号必须是是一位 才可以成功

    // 高级 可做可不做
    // 输入错误五次不能提现 等待三十秒再次输入
    querybtn() {
      let R = this.$store.state.Arr.reduce((a, b) => +a + +b);
      // if (
      //   +this.txje >= 100 &&
      //   R >= 100 &&
      //   this.name != undefined &&
      //   this.nub.length === 11
      // ) {
      //   this.$store.commit("setLogin", -+this.txje);
      //   this.txje = null;
      // } else {
      //   Toast("提现金额小于100或余额不足一百");
      // }
      if (R >= 100) {
        if (this.txje >= 100) {
          if (this.name != "") {
            if (this.nub.length == 11) {
              if (this.txje <= R) {
                this.$store.commit("setLogin", -+this.txje);
                this.txje = null;
                this.Time();
                // console.log(this.$store.state.setTime);
                this.$store.commit("setNowDate", this.nowDate);
                Toast.success("提现成功，金额将会在2到3个工作日到账");
              } else {
                Toast("余额不足");
              }
            } else {
              Toast("账号不正确");
            }
          } else {
            Toast("姓名不能为空");
          }
        } else {
          Toast("单次提现金额不少于一百");
        }
      } else {
        Toast("余额不足");
      }
    },
    call(str) {
      let cal = /^1(3|4|5|6|7|8|9)d{9}$/;
      // console.log(cal.test(str));
      return cal.test(str);
    },
    btn() {
      this.$router.push("/red");
    },
    Time() {
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let week = date.getDay(); // 星期
      let weekArr = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      ];
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      this.nowDate = `${year}/${month}/${day} ${hour}:${minute}:${second} ${weekArr[week]}`;
      return this.nowDate;
    }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.div_1 {
  color: orange;
  font-size: 14px;
}
.qb {
  letter-spacing: 2px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
.mian {
  width: 100%;
  height: 91vh;
  background: #f5f5f5;
  padding-top: 20px;
}
.content {
  width: 90%;
  margin: 0px auto;
  background: #ffffff;
  border-radius: 5px;
  height: 170px;
}
.cont {
  font: 18px Pingfang SC;
}
.con span {
  color: red;
  font-size: 14px;
  text-align: center;
}
.cont {
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid pink;
}
.cont div {
  width: 100%;
  height: 50px;
  line-height: 50px;
  margin-left: 20px;
}
.cont_s {
  display: inline-block;
  font-size: 18px;
  color: pink;
  margin-left: 10px;
}
.con {
  margin-top: 20px;
}
.con_div {
  width: 90%;
  margin: 0 auto;
}
.con_d_d {
  margin-top: 10px;
}
.con_d_d span {
  font: 20px Pingfang SC;
  color: black;
}
.con_d_d input {
  /* margin-left: 15px; */
  outline: none;
  border: none;
  height: 40px;
  line-height: 40px;
}
input::-webkit-input-placeholder {
  color: #dcdcdc;
  font-size: 20px;
}
.mian_b {
  width: 90%;
  margin: 20px auto;
  background: #ffffff;
  border-radius: 5px;
  height: 120px;
}
.mian_b_cont {
  width: 90%;
  margin: 0 auto;
  background: #ffffff;
}
.mian_b_cont .user {
  border-bottom: 1px solid #dcdcdc;
  font-size: 20px;
  height: 55px;
  line-height: 55px;
}
.mian_b_cont input {
  outline: none;
  border: none;
  /* margin-left: 20px; */
}
.mian_b_cont .iteh {
  font-size: 20px;
  height: 55px;
  line-height: 55px;
}
.foot {
  width: 90%;
  margin: 0 auto;
}
.foot .foot_text {
  font-size: 15px;
  color: IndianRed;
}
.foot .btn {
  border-radius: 5px;
  width: 95%;
  margin: 20px auto 0;
  text-align: center;
  height: 50px;
  line-height: 50px;
  font-size: 24px;
  color: #ffffff;
  background: orangered;
}
</style>